<template>
  <div class="wrap">
    <div class="main-area">
      <div class="header">
        <h1 class="title">经典案例</h1>
        <span class="action" @click="goBack">返回 ></span>
      </div>
      <div class="size-box__column"></div>
      <div class="list">
        <div
          class="list-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <a @click="CaseDetailTo(item.id)">
            <img class="case-img" :src="baseAssets + '/'+ item.programmeImage" />
            <div class="content">
              <h2 class="name">{{item.programmeTitle}}</h2>
              <p class="desc">{{item.programmeDescription}}</p>
            </div>
          </a>
        </div>
      </div>
      <div class="footer">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="page"
          :page-size="10"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//import axios from "@/utils/axios";
import { getCasesList } from "@/api/programme";
export default {
  data () {
    return {
      baseAssets: process.env.VUE_APP_BASE_ASSETS,
      page: 1,
      total: 0,
      list: [
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
        {
          programmeImage: require('@/assets/huaweiyun.jpg'),
          programmeTitle: '华为云信息技术有限公司',
          programmeDescription: '用户可以在华为云上快速搭建桌面云平台，实现便捷、安全的云上Linux、Windows桌面办公环境。包括便捷的桌面环境创建、部署、统一管理与运维'
        },
      ]
    }
  },
  methods: {
    toCaseList () {
      console.log("加载下一页数据。。。");
      //请求后端分页接口
      this.getRequestPage(1);
    },
    //请求分页接口
    getRequestPage(pageNo) {
      let pageUrl = "/enterprise-programme/list";
      let params = {};
      pageNo = this.pageIndex;
      console.log("请求页码:" + pageNo);
      params.pageNo = pageNo;
      params.pageSize = 10;
      getCasesList(params.pageNo, params.pageSize).then(
        (response) => {
          // console.log(response.data);
          this.list = response.data.records;
        }
      );
      // var data = axios.get(pageUrl, params);
      // console.log(data);
      // this.newsList.push();
      this.pageIndex = this.pageIndex + 1;
    },
    // getRequestPage(pageNo) {
    //   let pageUrl = "/enterprise-programme/list";
    //   let params = {};
    //   pageNo = this.pageIndex;
    //   console.log("请求页码:" + pageNo);
    //   params.pageNo = pageNo;
    //   params.pageSize = 10;
    //   var data = axios.get(pageUrl, params);
    //   console.log(data);
    //   this.list.push();
    //   this.pageIndex = this.pageIndex + 1;
    // },
    goBack () {
      this.$router.go(-1)
    },
    CaseDetailTo(id) {
      console.log("打开的企业id:"+id);
       this.$router.push({ path: "/partner/CaseDetail"});
    },
  },
  mounted() {
    console.log("进入到钩子函数 mounted...")
    this.pageIndex = 1;
    this.getRequestPage(this.pageIndex);
  }
};
</script>

<style lang="less" scoped>
@import "~@/style/variables.less";
.wrap {
  width: 100%;
  min-width: 1200px;
}

.main-area {
  width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  .title {
    font-size: 25px;
    font-weight: bold;
  }
  .action {
    cursor: pointer;
    font-size: 14px;
  }
}



.list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .list-item {
    @box_shadow();
    cursor: pointer;
    width: calc((100% - 60px) / 3);
    background-color: #fff;
    height: 220px;
    margin-right: 30px;
    margin-bottom: 30px;
    transition: all 0.4s;
    &:nth-child(3n) {
      margin-right: 0;
    }
    &:hover {
      transform: scale(1.08);
    }
    .logo {

    }
    .content {
      padding: 0 20px;
      .name {
        font-size: 20px;
        font-weight: 500;
      }
      .desc {
        .text_overflow_ellipsis_more(2);
        line-height: 22px;
        font-size: 16px;
        color: @font_gray;
        margin-top: 12px;
      }
    }
    
  }
}

.footer {
  @align_center();
}
</style>